<template>
	<view>
		<uni-section title="编辑提醒" type="line">
			<view style="padding: 10px;">
				<uni-easyinput
					:disabled="!editableReminder"
					type="textarea"
					autoHeight
					class="uni-mt-5"
					trim="all"
					v-model="valueReminder"
					placeholder="请输入提醒内容"
					@input="changeValueReminder"
				></uni-easyinput>
			</view>

			<view class="content" style="font-size: 14px;">提醒时间</view>
			<uni-datetime-picker :clear-icon="true" :border="false" :disabled="!editableReminder" type="datetime" v-model="datetimeStartReminder" @change="changeValueReminder" />

			<view style="padding: 10px;text-align: right;">
				<button type="primary" plain="true" size="mini" @click="edit">{{ btnTextReminder }}</button>
			</view>
		</uni-section>
		<uni-section title="提醒名单" type="line">
			<uni-search-bar placeholder="搜索用户姓名" @confirm="search" />
			<view style="text-align: center;"><uni-data-select v-model="value" :localdata="range" @change="change" :clear="true" placeholder="已读/未读" /></view>
		
			<uni-list>
				<uni-list-item title="姓名" rightText="已读/未读">
				</uni-list-item>
			</uni-list>
		</uni-section>
	</view>
</template>

<script>
export default {
	data() {
		return {
			indexReminder: ['0'],
			datetimeStartReminder: '',
			datetimeEndReminder: '',
			editableReminder: false,
			btnTextReminder: '编辑',
			changedReminder: false,
			valueReminder: ''
		};
	},
	methods: {
		edit() {
			if (this.btnTextReminder == '编辑') {
				this.editableReminder = true;
				this.btnTextReminder = '确认';
			} else if (this.datetimeEndReminder != '' && this.datetimeStartReminder != '' && this.datetimeEndReminder <= this.datetimeStartReminder) {
				uni.showToast({
					title: '结束时间不可早于开始时间！',
					duration: 2000
				});
			} else {
				this.editableReminder = false;
				this.btnTextReminder = '编辑';
				if (this.changedReminder) {
				}
				this.changedReminder = false;
			}
		},
		changeValueReminder(value) {
			this.changedReminder = true;
		}
	}
};
</script>

<style>
.content {
	padding: 15px;
}
/* 修改buttom默认样式 */
button {
	font-size: 18rpx;
	height: 60rpx;
}
</style>
